import styled from 'styled-components'

export const HeaderWrap = styled.div`
  height:70px;
  background-color: #242424;
  font-size: 14px;
  line-height: 70px;
  
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
      .logo {
        display: inline-block;
        width: 176px;
        height: 69px;
        background-position: 0 0;
        text-indent:-999px;
      }
      .select {
        display: flex;
        align-items: center;
        
        .select-item {
          padding: 0 19px;
          cursor: pointer;
          color: #fff;
          text-align:center;
          position: relative;
          &:hover {
            text-decoration: none;
            background-color: #000;
          }

          &.active .icon {
            display: inline-block;
            width: 12px;
            height: 7px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-position: -226px 0;
          }

          &:last-child .hot {
            position: absolute;
            top: 21px;
            left: 100px;
            display: inline-block;
            width: 28px;
            height: 19px;
            background-position: -190px 0;
          }
        }
      }
      
    }

    .right {
      display: flex;
      align-items: center;
      .search {
        width: 158px;
        height: 32px;
        border-radius: 32px;
        outline: none;
          input {
            font-size: 12px;
          }
      }
    .center {
      width: 90px;
      height: 32px;
      margin-left: 12px;
      margin-right: 12px;
      box-sizing: border-box;
      padding-left: 16px;
      border: 1px solid #4F4F4F;
      background-position: 0 -140px;
      line-height: 33px;
      color: #ccc;
      border-radius: 20px;
      font-size: 12px;
      cursor: pointer;

      &:hover {
        border-color: #fff;
        color: #fff;
      }
    }
    .login {
     color: #787878;
     cursor: pointer;
     font-size: 12px;
     &:hover {
       color: #999;
     }
    }
    }
  }
}
  .divider {
    height: 5px;
    background-color:#C20C0C;
  }
`